<template>
  <div class="header">
    <div class="header-left">
      {{ $route.meta.title }}
    </div>
    <div class="header-right">
      <a-dropdown style="cursor: pointer">
        <span class="ant-dropdown-link" @click="(e) => e.preventDefault()">
          {{ username }} <a-icon type="caret-down" />
        </span>
        <a-menu slot="overlay" @click="onClick">
          <!-- <a-menu-item key="editPassword"> 修改密码 </a-menu-item> -->
          <a-menu-item key="logout"> 退出登录 </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
    <a-modal
      title="修改密码"
      width="640px"
      :visible="visible"
      @ok="handleSubmit"
      @cancel="handleCancel"
    >
      <a-form :form="form" @submit="handleSubmit">
        <a-row>
          <a-col :span="24"
            ><a-form-item label="旧密码">
              <a-input-password
                v-decorator="[
                  'oldPwd',
                  {
                    rules: [{ required: true, message: '请输入旧密码！' }],
                  },
                ]"
                placeholder="请输入旧密码"
              /> </a-form-item
          ></a-col>
          <a-col :span="24"
            ><a-form-item label="新密码">
              <a-input-password
                v-decorator="[
                  'newPwd',
                  {
                    rules: [{ required: true, message: '请输入新密码！' }],
                  },
                ]"
                placeholder="请输入新密码"
              /> </a-form-item
          ></a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { getAction, putAction } from '../http/manage'
export default {
  data () {
    return {
      form: this.$form.createForm(this),
      visible: false,
    }
  },
  computed: {
    username () {
      const username = sessionStorage.getItem("username");
      return username
    }
  },
  mounted(){
  },
  methods: {
    handleCancel (e) {
      this.visible = false;
    },
    handleSubmit (e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          putAction('/user/pwd', values).then(res => {
            if (res.data.code == 0) {
              this.$message.success('修改成功，请重新登录！')
              this.visible = false
              sessionStorage.removeItem("accessToken");
              sessionStorage.clear();
              this.$router.push('/');
            }
          }).catch(() => { })
        }
      })
    },
    onClick ({ key }) {
      var that = this
      if (key == "logout") {
        this.$confirm({
          title: '确认退出登录？',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          autoFocusButton: null,
          onOk () {
            getAction('/user/userLogout').then(res => {
              if (res.data.code == 0) {
                // localStorage.removeItem("authorization");
                sessionStorage.removeItem("accessToken");
                sessionStorage.clear();
                that.$router.push('/');

              }else{
                   sessionStorage.removeItem("accessToken");
                sessionStorage.clear();
                that.$router.push('/');
              }
            }).catch(() => { })
          },
          onCancel () {
          },
        });
      } else if (key == 'editPassword') {
        this.form.resetFields()
        this.visible = true
      }
    },
  },

}
</script>

<style scoped>
.header {
  width: 100%;
  height: 48px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  font-size: 14px;
  color: #000;
  box-sizing: border-box;
}
</style>